chore: hide scrollbars in dev pages when motion is disabled on Safari #3303
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This reverts commit f9aeff8.
jperals
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #3303 +/- ##
========================================
Coverage 96.42% 96.42%
========================================
Files 791 791
Lines 22610 22610
Branches 7396 7806 +410
========================================
Hits 21802 21802
+ Misses 801 754 -47
- Partials 7 54 +47 ☔ View full report in Codecov by Sentry. |
jperals
changed the title
orangevolon
reviewed
Feb 27, 2025
| @@ -20,6 +20,15 @@ body { | |||
| caret-color: transparent !important; | |||
| } | |||
| // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type | |||
|
|
|||
| html:has(&.safari) { | |||
There was a problem hiding this comment.
Two questions:
- Where
&points to?<html>or<body>tag? - Would it be possible to set
::-webkit-scrollbaronbodyrather thanhtmlso it would make the selector simpler?
body.safari::-webkit-scrollbar {
inline-size: 0;
block-size: 0;
}There was a problem hiding this comment.
&expands to the parent selector. So in this case the selector becomeshtml:has(:global(.awsui-motion-disabled).safari)- This is on purpose, because there are scrollbars at the page level, and we want to hide them too. Just double-checked on Safari that targeting the
htmlelement instead ofbodyis needed for this
There was a problem hiding this comment.
Makes sense. I think we can add this conversation as a comment on top of the selector. Just to have a bit more context around it.
orangevolon
approved these changes
Feb 27, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
When updating Safari from 15 to 16 in our visual regression Safari tests, scrollbars appear and they happen to be flaky —with variable opacity, and sometimes not appearing at all, causing unexpected screenshot diffs. Therefore bringing back scrollbars hiding for Safari in our dev pages.
After this change, scrollbars are not visible when using Safari and motion is disabled.
Note: I noticed that for the setting to have effect, motion needs to be disabled when the page is loaded. So in order to switch scrollbars on or off manually, it is necessary not only to toggle the motion disabled option (either via the checkbox or via the URL parameters) but also to reload the page. This seems to be a browser limitation and does not affect our tests.
This reverts commit f9aeff8 "in essence", but with two differences:
Other options considered:
How has this been tested?
Ran in my pipeline. Scrollbars are consistently hidden in Safari components tests.
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.